<div class="row justify-content-center">
  <div class="col-8">
    <form name="editForm" role="form" novalidate (ngSubmit)="save()" [formGroup]="editForm">
      <h2 id="jhi-post-heading" data-cy="PostCreateUpdateHeading" jhiTranslate="blogApp.post.home.createOrEditLabel">
        Create or edit a Post
      </h2>

      <div>
        <jhi-alert-error></jhi-alert-error>

        <div class="form-group" [hidden]="editForm.get('id')!.value == null">
          <label class="form-control-label" jhiTranslate="global.field.id" for="field_id">ID</label>
          <input type="number" class="form-control" name="id" id="field_id" data-cy="id" formControlName="id" [readonly]="true" />
        </div>

        <div class="form-group">
          <label class="form-control-label" jhiTranslate="blogApp.post.title" for="field_title">Title</label>
          <input type="text" class="form-control" name="title" id="field_title" data-cy="title" formControlName="title" />
          <div *ngIf="editForm.get('title')!.invalid && (editForm.get('title')!.dirty || editForm.get('title')!.touched)">
            <small class="form-text text-danger" *ngIf="editForm.get('title')?.errors?.required" jhiTranslate="entity.validation.required">
              This field is required.
            </small>
          </div>
        </div>

        <div class="form-group">
          <label class="form-control-label" jhiTranslate="blogApp.post.content" for="field_content">Content</label>
          <textarea class="form-control" name="content" id="field_content" data-cy="content" formControlName="content"></textarea>
          <div *ngIf="editForm.get('content')!.invalid && (editForm.get('content')!.dirty || editForm.get('content')!.touched)">
            <small
              class="form-text text-danger"
              *ngIf="editForm.get('content')?.errors?.required"
              jhiTranslate="entity.validation.required"
            >
              This field is required.
            </small>
          </div>
        </div>

        <div class="form-group">
          <label class="form-control-label" jhiTranslate="blogApp.post.date" for="field_date">Date</label>
          <div class="d-flex">
            <input
              id="field_date"
              data-cy="date"
              type="datetime-local"
              class="form-control"
              name="date"
              formControlName="date"
              placeholder="YYYY-MM-DD HH:mm"
            />
          </div>
          <div *ngIf="editForm.get('date')!.invalid && (editForm.get('date')!.dirty || editForm.get('date')!.touched)">
            <small class="form-text text-danger" *ngIf="editForm.get('date')?.errors?.required" jhiTranslate="entity.validation.required">
              This field is required.
            </small>
            <small
              class="form-text text-danger"
              [hidden]="!editForm.get('date')?.errors?.ZonedDateTimelocal"
              jhiTranslate="entity.validation.ZonedDateTimelocal"
            >
              This field should be a date and time.
            </small>
          </div>
        </div>

        <div class="form-group">
          <label class="form-control-label" jhiTranslate="blogApp.post.blog" for="field_blog">Blog</label>
          <select class="form-control" id="field_blog" data-cy="blog" name="blog" formControlName="blog">
            <option [ngValue]="null"></option>
            <option
              [ngValue]="blogOption.id === editForm.get('blog')!.value?.id ? editForm.get('blog')!.value : blogOption"
              *ngFor="let blogOption of blogsSharedCollection; trackBy: trackBlogById"
            >
              {{ blogOption.name }}
            </option>
          </select>
        </div>

        <div class="form-group">
          <label jhiTranslate="blogApp.post.tag" for="field_tags">Tag</label>
          <select class="form-control" id="field_tags" data-cy="tag" multiple name="tags" formControlName="tags">
            <option
              [ngValue]="getSelectedTag(tagOption, editForm.get('tags')!.value)"
              *ngFor="let tagOption of tagsSharedCollection; trackBy: trackTagById"
            >
              {{ tagOption.name }}
            </option>
          </select>
        </div>
      </div>

      <div>
        <button type="button" id="cancel-save" class="btn btn-secondary" (click)="previousState()">
          <fa-icon icon="ban"></fa-icon>&nbsp;<span jhiTranslate="entity.action.cancel">Cancel</span>
        </button>

        <button
          type="submit"
          id="save-entity"
          data-cy="entityCreateSaveButton"
          [disabled]="editForm.invalid || isSaving"
          class="btn btn-primary"
        >
          <fa-icon icon="save"></fa-icon>&nbsp;<span jhiTranslate="entity.action.save">Save</span>
        </button>
      </div>
    </form>
  </div>
</div>
